<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<style type="text/css">
			 .SubCategoryBox{margin:100px;width: 400px;height: 200px;border: 1px solid #AAAAAA;}
			 .SubCategoryBox ul{list-style: none;}
			 .SubCategoryBox li{float: left;padding:10px;}
			 a{text-decoration: none;color:black;}
			 .showmore{position:relative;right:80px;top:50px}
		</style>
	</head>
	<body>
		<div class="SubCategoryBox">
			<ul>
				<li><a href="">佳能</a></li>
				<li><a href="">索尼</a></li>
				<li><a href="">三星</a></li>
				<li><a href="">尼康</a></li>
				<li><a href="">松下</a></li>
				<li><a href="">卡西欧</a></li>
				<li><a href="">富士</a></li>
				<li><a href="">柯达</a></li>
				<li><a href="">理光</a></li>
				<li><a href="">宾得</a></li>
				<li><a href="">奥林巴斯</a></li>
				<li><a href="">明基</a></li>
				<li><a href="">爱国者</a></li>
				<li><a href="">其他品牌相机</a></li>
			</ul>
			<div class="showmore">
					<button>显示全部品牌</button>
			</div>
		</div>  
		<script> 
		// 1.获取索>5的li
		// 2.将获取的索引>5的li隐藏掉
		// 3.当点击button的时候，显示
		 $(function(){
		 	var $category=$("ul li:gt(5):not(:last)");
		 	console.info($category);
		 	$category.hide();
		 	$("button").click(function(){
		 		if($category.is(":visible")){
		 			$category.hide();
		 			$(this).text("显示全部品牌");
		 		}else{
		 			$category.show();
		 		$(this).text("精简显示品牌");
		 		}
		 	})
		 })
		</script>
	</body>
</html>
